import classNames from "classnames";

const NameText = ({
  text,
  boxSize,
  position,
}: {
  text: string;
  boxSize: string;
  position: "left" | "right";
}) => {
  const size = Number(boxSize);
  return (
    <div
      className={classNames(
        "border-black bg-[#f5f9fd77] flex items-center justify-center",
        position === "left" ? "border-l" : "border-r"
      )}
      style={{
        height: `${size}vh`,
        width: `${size}vh`,
      }}
      suppressHydrationWarning
    >
      <span style={{ fontSize: `${size - 0.5}vh` }} suppressHydrationWarning>
        {text}
      </span>
    </div>
  );
};

export default NameText;
